<template>
    <div>
        <div style="display: flex; flex-wrap: wrap; gap: 10px;margin: 10px;" class="coverImg">
            <img class="pet_cover_imgs"
                 v-for="(item, index) in petInfo"
                 :key="index"
                 :src="item.coverImg"
                 @click="changeIndex(index)"
            />
        </div>

        <div class="pet-info">
            <el-card class="pet-title_photo">
                <div style="overflow: hidden;height: 220px">
                    <img class="pet_main_imgs"
                         :src="petInfo[selected].mainImg"
                    />
                </div>
                <div style="position: absolute;margin-top: -140px;margin-left: 30px">
                    <h2 style="color: white">{{ petInfo[selected].petName }}</h2>
                    <div style="display: flex;gap: 20px">
                        <div class="pet_info_tag">
                            <img src="../assets/img/cake.png" style="height: 20px;margin-bottom: -4px">
                            <div class="tag_info">{{ petInfo[selected].age }}岁</div>
                        </div>
                        <div class="pet_info_tag">
                            <img src="../assets/img/dog.png" style="height: 20px;margin-bottom: -4px"
                                 v-if="petInfo[selected].specis==='狗'">
                            <img src="../assets/img/anamal.png" style="height: 20px;margin-bottom: -4px"
                                 v-if="petInfo[selected].specis !== '狗'">
                            <div class="tag_info">{{ petInfo[selected].specis }}</div>
                        </div>
                        <div class="pet_info_tag">
                            <img src="../assets/img/male.png" style="height: 20px;margin-bottom: -4px"
                                 v-if="petInfo[selected].gender ===0">
                            <img src="../assets/img/female.png" style="height: 20px;margin-bottom: -4px"
                                 v-if="petInfo[selected].gender ===1">
                            <div class="tag_info">{{ petInfo[selected].gender === 1 ? '母' : '公' }}</div>
                        </div>
                    </div>
                </div>
                <!--        <el-image src="">-->
            </el-card>
            <div class="pet-info_contain">
                <div style="flex: 1;;margin: 10px">
                    <div class="base_archives">
                        <h1>基本档案</h1>
                        <div style="display: flex;gap: 20px;margin-top: 20px;margin-bottom: 20px">
                            <div class="description">毛色</div>
                            <div class="specific_information">{{ petInfo[selected].color }}</div>
                        </div>
                        <div style="display: flex;gap: 20px;margin-top: 20px;margin-bottom: 20px">
                            <div class="description">体重</div>
                            <div class="specific_information">{{ petInfo[selected].weight }}公斤</div>
                        </div>
                        <div style="display: flex;gap: 20px;margin-top: 20px;margin-bottom: 20px">
                            <div class="description">毛发</div>
                            <div class="specific_information">{{ petInfo[selected].hairLength }}</div>
                        </div>
                        <div style="display: flex;gap: 20px;margin-top: 20px;margin-bottom: 20px">
                            <div class="description">体型</div>
                            <div class="specific_information">{{ petInfo[selected].size }}</div>
                        </div>
                        <div style="display: flex;gap: 20px;margin-top: 20px;margin-bottom: 20px">
                            <div class="description">生日</div>
                            <div class="specific_information">{{ petInfo[selected].dateOfBirth }}
                            </div>
                        </div>
                    </div>
                    <div class="health_record">
                        <h1>健康记录</h1>
                        <div style="display: flex;gap: 20px;margin-top: 20px;margin-bottom: 20px">
                            <div class="description">体检</div>
                            <div class="specific_information" v-if="petInfo[selected].vaccinationReconds === 0"
                                 style="color: #ff5c5c">暂未体检
                            </div>
                            <div class="specific_information" v-if="petInfo[selected].vaccinationReconds !==0"
                                 style="color: green">已完成体检
                            </div>
                        </div>
                        <div style="display: flex;gap: 20px;margin-top: 20px;margin-bottom: 20px">
                            <div class="description">疫苗</div>
                            <div class="specific_information" v-if="petInfo[selected].dewormingRecords === 0"
                                 style="color: #ff5c5c">暂未接种疫苗
                            </div>
                            <div class="specific_information" v-if="petInfo[selected].dewormingRecords !== 0"
                                 style="color: green">已接种疫苗
                            </div>
                        </div>
                        <div style="display: flex;gap: 20px;margin-top: 20px;margin-bottom: 20px">
                            <div class="description">驱虫</div>
                            <div class="specific_information"
                                 v-if="petInfo[selected].dewormingRecord === '无'||petInfo[selected].dewormingRecord === null"
                                 style="color: #ff5c5c">暂未进行驱虫
                            </div>
                            <div class="specific_information"
                                 v-if="petInfo[selected].dewormingRecord !== '无'&& petInfo[selected].dewormingRecord !== null"
                                 style="color: green">已进行定期驱虫
                            </div>
                        </div>
                    </div>

                </div>
                <div style="flex: 1;margin: 10px">
                    <div class="personality_traits">
                        <h1>性格特征</h1>
                        <div style="display: flex;gap: 20px;margin-top: 20px;margin-bottom: 20px;padding-left: 20px">
                            <el-tag :type=getTagColor() size="large" effect="dark" style="font-size: 20px"
                                    v-for="item in petInfo[selected].personalityTrait">
                                {{ item }}
                            </el-tag>
                            <el-tag type="warning" size="large" effect="dark" style="font-size: 20px">
                                {{ petInfo[selected].activityPreferences }}
                            </el-tag>

                        </div>
                    </div>
                    <div class="daily_habits">
                        <h1>日常习惯</h1>
                        <div style="display: flex;gap: 20px;margin-top: 20px;margin-bottom: 20px;margin-left: 20px">
                            <img src="../assets/img/cutlery.png" style="height: 20px;margin-top:15px">
                            <div style="width: 600px">

                                <div class="description" style="margin-left: -30px;font-weight: 600">饮食习惯</div>
                                <div class="specific_information"
                                     style="margin-left: 20px;text-align: left;font-weight: normal;margin-top: 5px">
                                    {{ petInfo[selected].dietaryHabits }}
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;gap: 20px;margin-top: 20px;margin-bottom: 20px;margin-left: 20px">
                            <img src="../assets/img/training.png" style="height: 20px;margin-top:15px">
                            <div style="width: 600px">
                                <div class="description" style="margin-left: -30px;font-weight: 600">睡觉习惯</div>
                                <div class="specific_information"
                                     style="margin-left: 20px;text-align: left;font-weight: normal;margin-top: 5px">
                                    {{ petInfo[selected].sleepHabits }}
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;gap: 20px;margin-top: 20px;margin-bottom: 20px;margin-left: 20px">
                            <img src="../assets/img/moon.png" style="height: 20px;margin-top:15px">
                            <div style="width: 600px">
                                <div class="description" style="margin-left: -30px;font-weight: 600">运动习惯</div>
                                <div class="specific_information"
                                     style="margin-left: 20px;text-align: left;font-weight: normal;margin-top: 5px">
                                    {{ petInfo[selected].sportHabits }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="life_photo">
                <h1>生活照</h1>
                <div style="display: flex">
                    <div
                            style="min-height: 180px; min-width: 180px; padding-left: 30px; border: 1px solid #ccc;font-size: 40px;
           display: flex; align-items: center; justify-content: center; cursor: pointer; text-align: center;"
                            @click="triggerFileInput"
                    >
                        +
                        <input type="file" id="photo" ref="fileInput" @change="handleFileChange" class="file-input"
                               style="display: none;" aria-label="上传照片"/>
                    </div>
                    <img :src="item" style="height: 180px;padding-left: 30px" v-for="item in photos">
                </div>
                <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image"/>
                </el-dialog>
                <!--        <img :src="item" style="height: 180px;padding-left: 30px" v-for="item in petInfo[selected].phtos">-->

            </div>
        </div>
    </div>
</template>

<script>
import {editPetImg, editPetInfo, getPetListAPI} from "@/api/petApi";
import {parseTime2} from "@/utils/timeUtil";
import {ref} from 'vue'
import {Plus} from '@element-plus/icons-vue'
import type, {UploadProps, UploadUserFile} from 'element-plus'
import {uploadPic} from "@/api/user";

export default {
    name: "PetInfo",
    // setup() {
    //   // const fileList = ref<UploadUserFile[]>([
    //   //   {
    //   //     name: 'food.jpeg',
    //   //     url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    //   //   },
    //   //   // 其他文件列表项...
    //   // ]);
    //
    //   const dialogImageUrl = ref('');
    //   const dialogVisible = ref(false);
    //
    //   // const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    //   //   console.log(uploadFile, uploadFiles);
    //   // };
    //   //
    //   // const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    //   //   dialogImageUrl.value = uploadFile.url!;
    //   //   dialogVisible.value = true;
    //   // };
    //
    //   return {
    //     fileList,
    //     dialogImageUrl,
    //     dialogVisible,
    //     handleRemove,
    //     handlePictureCardPreview,
    //   };
    // },
    data() {
        return {
            photos: [],
            fileList: [],
            ref,
            Plus,
            type,
            UploadProps,
            UploadUserFile,
            selected: 0,
            petInfo: [
                {
                    petId: 1,
                    petName: "小白",
                    specis: "狗",
                    age: 3,
                    weight: 15,
                    gender: 1,
                    dateOfBirth: 1621440000000,
                    size: "中型",
                    hairLength: "短毛",
                    color: "白色",
                    vaccinationReconds: 0,
                    vaccinationRecond: '',
                    dewormingRecords: 0,
                    dewormingRecord: '',
                    medicalHistory: "无",
                    allergyHistory: "无",
                    personalityTraits: "活泼粘人",
                    dietaryHabits: "喜欢鸡肉和狗粮",
                    activityPreferences: "喜欢跑步和玩球",
                    sleepHabits: "喜欢睡觉",
                    sportHabits: "习惯运动",
                    coverImg: "http://localhost:8090/image/大狗 (2).png",
                    mainImg: "http://localhost:8090/imag1312312313e/大狗 (2).png",
                    imgs: "http://localhost:8090/image/大狗 (3).png;http://localhost:8090/image/大狗 (4).png;http://localhost:8090/image/大狗 (5).png"
                }
            ],
            dialogVisible: false,
            dialogImageUrl: ""
        };
    },
    methods: {
        triggerFileInput() {
            this.$refs.fileInput.click();
        },
        changeIndex(index) {
            this.selected = index
            if (this.petInfo[index].imgs.includes(';')) {
                this.photos = this.petInfo[index].imgs.split(';')
            }
        },
        handleFileChange(event) {
            let pet = {petId: this.petInfo[this.selected].petId, imgs: this.petInfo[this.selected].imgs};
            uploadPic(event.target.files[0]).then(res => {
                pet.imgs = res + ';' + pet.imgs;
                editPetImg(pet).then(res => {
                    this.getPetInfo()
                })
            })

        },
        handleRemove(uploadFile, uploadFiles) {
            console.log(uploadFile, uploadFiles)
        },
        getTagColor() {
            const a = Math.floor(Math.random() * 5 + 1);
            switch (a) {
                case 1:
                    return "primary";
                case 2:
                    return 'danger';
                case 3:
                    return 'warning';
                case 4:
                    return 'info';
                case 5:
                    return 'success';
            }
        },
        getPetInfo: function () {
            getPetListAPI().then(res => {
                this.petInfo = res.data.map(item => {
                    const updatedItem = {...item}; //
                    updatedItem.personalityTrait = updatedItem.personalityTraits.split(';');
                    updatedItem.dateOfBirth = parseTime2(updatedItem.dateOfBirth);
                    return updatedItem;
                });
                this.changeIndex(0)
            });
        }
    },
    mounted() {
        this.getPetInfo()
    }
};
</script>

<style scoped>
.pet-info {
    padding-left: 5%;
    padding-right: 5%;
}

.pet_cover_imgs {
    object-fit: cover;
    height: 45px;
    width: 45px;
    border-radius: 20px;
    border: #a7b1bb solid 2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 90ms ease;
}

.pet_cover_imgs:hover {
    cursor: pointer;
    transform: scale(1.1);
    transition: height 300ms ease, transform 300ms ease; /* 过渡动画 */

}

.pet_main_imgs {
    object-fit: contain;
    width: 100%;
    /*height: 300px;*/
}

.coverImg {
    overflow: hidden; /* 隐藏超出部分 */
}

.pet_cover_imgs:hover {
    transform: translateY(0);
}

.pet_cover_imgs:not(:hover) {
    transform: translateY(-25px);
}

.pet-info_contain {
    display: flex;
    width: 100%;
}

.base_archives {
    height: 300px;
    background: rgba(194, 194, 194, 0.2);
    border-radius: 8px;
}

.health_record {
    margin-top: 20px;
    height: 220px;
    background: rgba(194, 194, 194, 0.2);
    border-radius: 8px;
}

.personality_traits {
    height: 140px;
    background: rgba(194, 194, 194, 0.2);
    border-radius: 8px;
}

.daily_habits {
    margin-top: 20px;
    height: 380px;
    background: rgba(194, 194, 194, 0.2);
    border-radius: 8px;
}

.life_photo {
    margin-left: 2px;
    height: 300px;
    width: 79.5vw;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    background: rgba(194, 194, 194, 0.2);
    border-radius: 8px;
}

.description {
    padding-left: 50px;
    font-size: 18px;
    width: 25%;
}

.specific_information {
    font-size: 18px;
    font-weight: bold;
}

.pet_info_tag {
    display: flex;
    background: rgba(255, 255, 255, 0.3);
    padding: 5px;
    border-radius: 14px;
}

.tag_info {
    background: rgba(255, 255, 255, 0.1);
    padding-left: 5px;
    padding-right: 5px;
}
</style>